<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>WebSocket test</title>



<script type="text/javascript">
    var ws = window.WebSocket || window.MozWebSocket;
    var isConnected = false;

    function openws() {
        ws = new WebSocket("ws://localhost:9999/ws",);
        ws.onmessage = function (event) {
            console.log("收到消息 " + event.data);
            var ta = document.getElementById('responseText');
            ta.value = ta.value + '\n' + event.data;
        };
        ws.onopen = function (event) {
            isConnected = true;
            console.log("连接已建立");
            var ta = document.getElementById('responseText');
            ta.value = ta.value + "\n连接开启!";
        };
        ws.onclose = function (event) {
            isConnected = false;
            console.log("连接已关闭 ...");
            let ta = document.getElementById('responseText');
            ta.value = ta.value + "\n连接已关闭";
        };
        ws.onerror = function () {
        };
    }

    if (window.WebSocket) {
        openws();

    } else {
        alert("你的浏览器不支持！");
    }

    function send(message) {
        if (!window.WebSocket) {
            return;
        }
        if (ws.readyState === WebSocket.OPEN) {
            ws.send(message);
        } else {
            alert("连接没有开启.");
        }
    }

    var onmessage = function(event) {

        var text = "";
        var msg = JSON.parse(event.data);
        var time = new Date(msg.date);
        var timeStr = time.toLocaleString();
        var ta = document.getElementById('responseText');
        switch(msg.type) {
            case "id":
                clientID = msg.id;

                break;
            case "message":
                text =  ta.value + "\n(" + timeStr + "): " + msg.text;
                break;
            case "rejectusername":
                text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>"
                break;
            case "userlist":
                var ul = "";
                for (i=0; i < msg.users.length; i++) {
                    ul += msg.users[i] + "<br>";
                }
                document.getElementById("userlistbox").innerHTML = ul;
                break;
        }

        if (text.length) {
            ta.value = text;
        }
    };

    // Send text to all users through the server
    function sendText() {
        // Construct a msg object containing the data the server needs to process the message from the chat client.
        var msg = {
            type: "message",
            text: document.getElementById("text").value,
            id:   Number(Math.random() * 100).toFixed(),
            date: Date.now()
        };

        // Send the msg object as a JSON-formatted string.
        ws.send(JSON.stringify(msg));

    }

    /**
     * 关闭链接
     */
    function closews(){
        if (ws.readyState === 1) {
            //连接中才关闭
            ws.close(1000,'done');
        }
    }
</script>
<form onsubmit="return false;">
    <input type="text" id="text" name="message" value="Hello, World!">
    <!--<input type="button" value="发送消息" onclick="send(this.form.message.value)">-->
    <input type="button" value="发送消息" onclick="sendText()">
    <input type="button" value="关闭链接" onclick="closews()">
    <input type="button" value="打开链接" onclick="openws()">
    <h3>输出：</h3>
    <textarea id="responseText" style="width: 500px; height: 300px;"></textarea>
    <input type="button" onclick="javascript:document.getElementById('responseText').value=''" value="清空">
</form>

<script>


</script>
</html>